<template>
  <div>
    <div class="head">
      <router-link
        tag="div"
        to="/RecommendView"
        class="leftbox"
        v-for="(item, index) in lists"
        :key="index"
      >
        <svg
          t="1666602398689"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1787"
          width="200"
          height="200"
        >
          <path
            d="M224.45 538.68l575.11-346.21-0.05-68.75-575.03 345.61-0.03 69.35z"
            p-id="1788"
            fill="#ffffff"
          ></path>
          <path
            d="M224.45 538.68l575.08 356.96v-69.52L224.48 469.33l-0.03 69.35z"
            p-id="1789"
            fill="#ffffff"
          ></path>
        </svg>

        <p>{{ item.title }}</p>
      </router-link>

      <div class="rightbox">
        <div class="bon">
          <svg
            t="1666602515771"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3006"
            width="200"
            height="200"
          >
            <path
              d="M656.07 492.812a266.713 266.713 0 1 0-284.302 0C176.37 554.853 41.734 748.972 41.734 991.38a31.98 31.98 0 1 0 63.96 0c0-261.276 174.61-458.593 406.466-458.593S918.306 730.743 918.306 991.38a31.98 31.98 0 0 0 63.96 0c0-240.81-133.037-434.288-326.196-498.568zM311.965 266.713a202.753 202.753 0 1 1 202.753 202.754 203.073 203.073 0 0 1-202.753-202.754z"
              p-id="3007"
              fill="#ffffff"
            ></path>
          </svg>
        </div>

        <router-link tag="div" to="/RecommendView" class="bon">
          <svg
            t="1666602620237"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4102"
            width="200"
            height="200"
          >
            <path
              d="M954.058556 493.157863c-43.23264-44.004213-422.432055-429.957449-423.904593-431.429986-4.974291-4.975315-12.541641-7.496741-22.49227-7.496741-8.815783 0-15.785521 2.49789-20.711717 7.424086L66.122465 497.179456l0 8.266267c0 18.583241 6.119371 36.461423 17.232476 50.341548 10.562567 13.193487 24.000624 21.069875 35.945677 21.069875l65.450664 0 0 314.966485c0 55.979966 38.562271 75.842339 71.585385 75.842339 2.1295 0 14.32117-0.169869 90.969874-0.169869s70.608128-75.43711 70.608128-75.43711L417.91467 646.39592c0-9.287527 7.496741-16.362666 11.249205-16.362666l48.461735 0 0-40.904619-48.462758 0c-27.782763 0-52.154847 26.759457-52.154847 57.267285l0 245.477854c0 0-1.861394 34.718733-29.751604 34.718733-11.766998 0-89.919962 0.169869-90.920756 0.169869-30.67872 0-30.67872-26.297946-30.67872-34.938744L225.656925 535.952528 121.464911 535.952528c-3.078105-1.87879-11.418051-9.230222-13.795191-22.902616L508.582669 98.130971c52.142567 53.054333 362.372168 368.81081 410.150334 417.437298-0.699941 9.211802-2.52859 13.670348-3.717671 15.657608-0.86367 1.438769-1.606591 2.684132-6.225795 2.684132L804.540218 533.910009l-1.075495 355.077018c-2.52245 8.207939-13.405311 37.604456-39.892569 37.604456 0 0-40.298821 0-75.330686 0s-39.161928-21.097504-39.149649-34.718733c0.079818-84.74408 0.188288-237.419318-0.065492-246.077511-0.245593-8.330736-3.206018-21.429055-10.780531-33.213449-9.723455-15.123442-24.049742-23.454178-40.342824-23.454178l-55.19509 0 0 40.904619 55.19509 0c5.418406 0 10.094916 12.181437 10.235109 16.96437 0.222057 7.557116 0.138146 149.410891 0.048095 244.87615-0.020466 21.3871 0.603751 75.622328 80.055291 75.622328 51.746548 0 75.330686 0 75.330686 0 26.396183 0 48.812729-12.697183 64.826448-36.719296 10.906397-16.35448 14.9679-32.391734 15.395642-34.167171l1.528819-321.79603 63.466474 0c17.935488 0 32.611745-8.020674 41.328267-22.584368 6.597255-11.024078 9.80532-25.65838 9.80532-44.737924l0-8.366551L954.058556 493.157863z"
              p-id="4103"
              fill="#ffffff"
            ></path>
          </svg>
        </router-link>
      </div>
    </div>

    <div class="navs" v-for="(item, index) in lists" :key="index">
      <p class="con" v-for="(i, x) in item.nav" :key="x">{{ i }}</p>
      <!-- <p>推荐</p>
      <p>字数</p>
      <p>完本</p> -->
    </div>

    <div class="booklists" v-for="(item, index) in lists" :key="index + 1">
      <div class="items" v-for="(i, x) in item.book[num]" :key="x">
        <div class="img">
          <img :src="i.img" alt="" />
        </div>
        <div>
          <div class="literalsbox">
            <p>{{ i.name }}</p>
            <div class="text-nav">
              {{ i.desc }}
            </div>
            <div class="footbox">
              <span>{{ i.author }}</span>
              <div class="rightbox">
                <div>{{ i.serial }}</div>
                <span>{{ i.count }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="items">
        <div class="img">
          <img src="../assets/img/book2.jpg" alt="" />
        </div>
        <div class="literalsbox">
            <p>宋檀记事</p>
            <div class="text-nav">
              一句话简介:从修真界穿越回来后,我回老家种地开直播卖菜了！
              ——修成金丹渡劫失败的宋檀回到现代，发现自己身处连环车祸的现场，
              靠着恩人救命才死里逃生。苏醒后的仙女宋檀玩着手机：我喜欢这个世界！
              对着电脑两眼呆滞搞PPT的社畜宋檀：毁灭吧这个世界！PPT是不可能做的，
              只能回老家种田这样子。靠着自己的修仙经验，
              宋檀打造山水田园，薅野菜，农家饭，掐黄瓜，开直播，卖山珍……直到有一天，
              她看到了自己的救命恩人——在救她时被炸毁半张脸的那个男人。
              宋檀看了看对方的宽肩窄腰大长腿，又看了看对方另外半边清俊的脸，
              想起自己两辈子的单身狗生涯，心想：听说合欢宗的双修秘法可以滋补容颜，
              不知道……［纯种田，真的种田那种］［有男主，戏份不多］
            </div>
            <div class="footbox">
                <span>荆棘之歌</span>
                <div class="rightbox">
                    <div>连载</div>
                    <span>45.42万字</span>
                </div>
            </div>
          </div>
      </div>

      <div class="items">
        <div class="img">
          <img src="../assets/img/book2.jpg" alt="" />
        </div>
        <div class="literalsbox">
            <p>宋檀记事</p>
            <div class="text-nav">
              一句话简介:从修真界穿越回来后,我回老家种地开直播卖菜了！
              ——修成金丹渡劫失败的宋檀回到现代，发现自己身处连环车祸的现场，
              靠着恩人救命才死里逃生。苏醒后的仙女宋檀玩着手机：我喜欢这个世界！
              对着电脑两眼呆滞搞PPT的社畜宋檀：毁灭吧这个世界！PPT是不可能做的，
              只能回老家种田这样子。靠着自己的修仙经验，
              宋檀打造山水田园，薅野菜，农家饭，掐黄瓜，开直播，卖山珍……直到有一天，
              她看到了自己的救命恩人——在救她时被炸毁半张脸的那个男人。
              宋檀看了看对方的宽肩窄腰大长腿，又看了看对方另外半边清俊的脸，
              想起自己两辈子的单身狗生涯，心想：听说合欢宗的双修秘法可以滋补容颜，
              不知道……［纯种田，真的种田那种］［有男主，戏份不多］
            </div>
            <div class="footbox">
                <span>荆棘之歌</span>
                <div class="rightbox">
                    <div>连载</div>
                    <span>45.42万字</span>
                </div>
            </div>
          </div>
      </div>


      <div class="items">
        <div class="img">
          <img src="../assets/img/book2.jpg" alt="" />
        </div>
        <div class="literalsbox">
            <p>宋檀记事</p>
            <div class="text-nav">
              一句话简介:从修真界穿越回来后,我回老家种地开直播卖菜了！
              ——修成金丹渡劫失败的宋檀回到现代，发现自己身处连环车祸的现场，
              靠着恩人救命才死里逃生。苏醒后的仙女宋檀玩着手机：我喜欢这个世界！
              对着电脑两眼呆滞搞PPT的社畜宋檀：毁灭吧这个世界！PPT是不可能做的，
              只能回老家种田这样子。靠着自己的修仙经验，
              宋檀打造山水田园，薅野菜，农家饭，掐黄瓜，开直播，卖山珍……直到有一天，
              她看到了自己的救命恩人——在救她时被炸毁半张脸的那个男人。
              宋檀看了看对方的宽肩窄腰大长腿，又看了看对方另外半边清俊的脸，
              想起自己两辈子的单身狗生涯，心想：听说合欢宗的双修秘法可以滋补容颜，
              不知道……［纯种田，真的种田那种］［有男主，戏份不多］
            </div>
            <div class="footbox">
                <span>荆棘之歌</span>
                <div class="rightbox">
                    <div>连载</div>
                    <span>45.42万字</span>
                </div>
            </div>
          </div>
      </div>


      <div class="items">
        <div class="img">
          <img src="../assets/img/book2.jpg" alt="" />
        </div>
        <div class="literalsbox">
            <p>宋檀记事</p>
            <div class="text-nav">
              一句话简介:从修真界穿越回来后,我回老家种地开直播卖菜了！
              ——修成金丹渡劫失败的宋檀回到现代，发现自己身处连环车祸的现场，
              靠着恩人救命才死里逃生。苏醒后的仙女宋檀玩着手机：我喜欢这个世界！
              对着电脑两眼呆滞搞PPT的社畜宋檀：毁灭吧这个世界！PPT是不可能做的，
              只能回老家种田这样子。靠着自己的修仙经验，
              宋檀打造山水田园，薅野菜，农家饭，掐黄瓜，开直播，卖山珍……直到有一天，
              她看到了自己的救命恩人——在救她时被炸毁半张脸的那个男人。
              宋檀看了看对方的宽肩窄腰大长腿，又看了看对方另外半边清俊的脸，
              想起自己两辈子的单身狗生涯，心想：听说合欢宗的双修秘法可以滋补容颜，
              不知道……［纯种田，真的种田那种］［有男主，戏份不多］
            </div>
            <div class="footbox">
                <span>荆棘之歌</span>
                <div class="rightbox">
                    <div>连载</div>
                    <span>45.42万字</span>
                </div>
            </div>
          </div>
      </div>


      <div class="items">
        <div class="img">
          <img src="../assets/img/book2.jpg" alt="" />
        </div>
        <div class="literalsbox">
            <p>宋檀记事</p>
            <div class="text-nav">
              一句话简介:从修真界穿越回来后,我回老家种地开直播卖菜了！
              ——修成金丹渡劫失败的宋檀回到现代，发现自己身处连环车祸的现场，
              靠着恩人救命才死里逃生。苏醒后的仙女宋檀玩着手机：我喜欢这个世界！
              对着电脑两眼呆滞搞PPT的社畜宋檀：毁灭吧这个世界！PPT是不可能做的，
              只能回老家种田这样子。靠着自己的修仙经验，
              宋檀打造山水田园，薅野菜，农家饭，掐黄瓜，开直播，卖山珍……直到有一天，
              她看到了自己的救命恩人——在救她时被炸毁半张脸的那个男人。
              宋檀看了看对方的宽肩窄腰大长腿，又看了看对方另外半边清俊的脸，
              想起自己两辈子的单身狗生涯，心想：听说合欢宗的双修秘法可以滋补容颜，
              不知道……［纯种田，真的种田那种］［有男主，戏份不多］
            </div>
            <div class="footbox">
                <span>荆棘之歌</span>
                <div class="rightbox">
                    <div>连载</div>
                    <span>45.42万字</span>
                </div>
            </div>
          </div>
      </div> -->
    </div>

    <div class="underbox">
      <div class="navigation">
        <div class="navtext">首页</div>

        <div class="navtext" @click="prep">上一页</div>

        <div class="navtext" @click="next">下一页</div>

        <div class="navtext">末页</div>
      </div>
    </div>

    <div class="signfooter">Copyright@2022七猫小说</div>
  </div>
</template>

<script>
import { getfictionData } from "../api/home.js";
export default {
  data() {
    return {
      lists: [],
      num: 0,
    };
  },
  created() {
    getfictionData().then((data) => {
      console.log(data);
      this.lists = data.data;
    });
  },

  methods: {
    next() {
      this.lists.forEach((e) => {
        this.num >= e.book.length ? this.num == (e.book.length - 2) : this.num++;
        console.log();
      });

      // this.num == 2 ? 2 :this.num++
    },

    prep() {
      this.num == 0 ? 0 :this.num--
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0px;
  margin: 0px;
}
html,
body {
  width: 100%;
  height: 100%;
}
.head {
  display: flex;
  background-color: #222222;
  padding: 10px 14px;
  justify-content: space-between;
  border-bottom: 1px solid #444444;
  .leftbox {
    display: flex;
    .icon {
      width: auto;
      height: 20px;
    }

    p {
      color: #ffffff;
      font-size: 14px;
      margin-left: 6px;
    }
  }
  .rightbox {
    display: flex;
    .bon {
      margin-left: 16px;
      .icon {
        width: 20px;
        height: 20px;
      }
    }
  }
}

.navs {
  display: flex;
  padding: 20px 0px;
  padding-left: 23px;
  background-color: #ffffff;

  p {
    color: #666666;
    font-size: 12px;
    margin-right: 18px;
  }
  .con {
    color: #1abc9c;
    border-bottom: 1px solid #1abc9c;
  }
}

.booklists {
  padding: 0px 15px;
  padding-bottom: 10px;
  background-color: #ffffff;
  .items {
    display: flex;
    margin-bottom: 10px;
    .img {
      margin-right: 10px;
      img {
        width: auto;
        height: 96px;
      }
    }

    .literalsbox {
      p {
        color: #333333;
        font-weight: bold;
      }

      .text-nav {
        color: #666666;
        font-size: 12px;
        text-align: justify;
        text-justify: inter-ideograph;
        text-indent: 2em;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        margin: 4px 0px;
      }

      .footbox {
        display: flex;
        justify-content: space-between;

        color: #666666;
        span {
          font-size: 13px;
        }

        .rightbox {
          display: flex;

          div {
            border: 1px solid #1abc9c;
            color: #1abc9c;
            font-size: 12px;
          }
          span {
            color: #ff6600;
            border: 1px solid #ff6600;
            font-size: 12px;
            margin-left: 4px;
          }
        }
      }
    }
  }
}

.underbox {
  background-color: #ffffff;
  padding-bottom: 20px;
  .navigation {
    display: flex;
    justify-content: space-evenly;
    .navtext {
      padding: 6px 9px;
      background-color: #1abc9c;
      color: #ffffff;
      border-radius: 5px;
    }
  }
}

.signfooter {
  margin-top: 30px;
  background-color: #ffffff;
  padding: 28px 0px;
  text-align: center;
  color: #9fa2a3;
  font-size: 10px;
}
</style>